import DownloadSection from "@/app/[locale]/(TabBar)/[[...share]]/_home/DownloadSection";
import {
    NoticePlaceHolder,
    PrizePlaceHolder,
    SwiperPlaceHolder,
} from "@/app/[locale]/(TabBar)/[[...share]]/Placeholder";
import Header from "@/components/Header";
import { getTranslations } from "next-intl/server";
import { FC, PropsWithChildren, ReactNode, Suspense } from "react";
export const generateMetadata = async () => {
    const t = await getTranslations("titles");
    return {
        title: t("home"),
    };
};
type Props = {
    clientWidget: ReactNode;
    swiperWidget: ReactNode;
    popupWidget: ReactNode;
    cardWidget: ReactNode;
    noticeWidget: ReactNode;
    searchWidget: ReactNode;
    prizeWidget: ReactNode;
    actionWidget: ReactNode;
    mediaWidget: ReactNode;
    sportSwiperWidget: ReactNode;
    categoryWidget: ReactNode;
    navigateWidget: ReactNode;
    group: any;
};

const Placeholder = () => {
    return <div className={"flex justify-center"}>{/*<Loading/>*/}</div>;
};
const Layout: FC<PropsWithChildren<Props>> = async (props) => {
    const {
        children,
        swiperWidget,
        popupWidget,
        cardWidget,
        noticeWidget,
        searchWidget,
        prizeWidget,
        actionWidget,
        mediaWidget,
        sportSwiperWidget,
        clientWidget,
        navigateWidget,
        categoryWidget,
    } = props;

    return (
        <>
            <Suspense>{clientWidget}</Suspense>
            <Suspense>
                <DownloadSection />
            </Suspense>
            <Suspense>
                <Header></Header>
            </Suspense>
            <main id="maincontainer" className={"main-header"}>
                {/*弹窗*/}
                <Suspense fallback={<Placeholder />}>{popupWidget}</Suspense>
                <div className={"px-spacing-x py-spacing-y"}>
                    {/* swiper */}
                    <Suspense fallback={<SwiperPlaceHolder />}>{swiperWidget}</Suspense>
                </div>
                {/* swiper下的活动 */}
                <div className="px-spacing-x">
                    <Suspense>{cardWidget}</Suspense>
                </div>
                {/* 跑马灯 */}
                <div className="px-spacing-x">
                    <Suspense fallback={<NoticePlaceHolder />}>{noticeWidget}</Suspense>
                </div>
                <div className="px-spacing-x">
                    <Suspense fallback={<Placeholder />}>{navigateWidget}</Suspense>
                </div>

                {/* <Box>
                       {categoryWidget}
                    </Box> */}
                {/*体育轮播*/}
                {/* <Box> {sportSwiperWidget}</Box> */}
                {/* 搜索下面的大奖展示 */}
                {/*<Suspense fallback={<PrizePlaceHolder />}>{prizeWidget}</Suspense>*/}
                {/* 搜索组件 */}
                {/* <Box none className="mb-[.2rem] px-[.12rem]">
                        {searchWidget}
                    </Box> */}
                {/* tabs 和 游戏列表 */}
                <Suspense fallback={<PrizePlaceHolder />}>{children}</Suspense>
                {/* 大奖 */}
                <Suspense fallback={<PrizePlaceHolder />}>{prizeWidget}</Suspense>
                {/*媒体*/}
                {/*  <div className="mt-[.2rem]">*/}
                {/*<Suspense fallback={<Placeholder />}>{mediaWidget}</Suspense>*/}
                {/*</div>*/}
                {/* {React.Children.map(children,(child:any)=>{
                    console.log(child)
                    return React.cloneElement(child,{sass:'asdasadsadsadasds'} )

                })} */}
                {/*底部信息*/}
                <Suspense fallback={<Placeholder />}>{actionWidget}</Suspense>
            </main>
        </>
    );
};

export default Layout;